<script setup lang="ts">

import {ref,defineProps,defineEmits} from "vue";
import {
    useMessage,
    FormRules
} from 'naive-ui'
import {addUser} from "../../../api/user.ts";
const message = useMessage()
interface ModelType {
    name: string | ''
    password: string | ''
    email: string | ''
}
const props =defineProps({
    showModal:{
        type:Boolean,
        default:false
    }
})
const emit = defineEmits([])
const showModal = ref(false)

const model= ref<ModelType>({
    name: '',
    password: '',
    email: ''
})
// const model = modelRef
const rules: FormRules = {
    name: [
        {
            required: true,

            message: '请输入姓名'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ],
    email: [
        {
            required: true,
            message: '请输入邮箱',
        }
    ]
}
const formRef = ref()
const userSubmit = (e) => {
    e.preventDefault()
    formRef.value.validate(err => {
        if(err){
            console.log(err)
        }else {
            addUser(model.value).then(res => {
                emit('changeModal',false)
                message.success('添加成功')
                emit('reloadTable')
                model.value.email=''
                model.value.password=''
                model.value.name=''

            })
        }
    })
}
</script>

<template>
    <div>
        <n-modal
                v-model:show="props.showModal"
                @update:show = "$emit('changeModal',false)"
                :mask-closable="true"
        >
            <n-card
                    style="width: 600px"
                    title="添加用户"
                    :bordered="false"
                    size="huge"
                    role="dialog"
                    aria-modal="true"
            >
                <template #header-extra>
                    <span @click="$emit('changeModal',false)" style="cursor:pointer">x</span>
                </template>
                <n-form ref="formRef" :model="model" :rules="rules">
                    <n-form-item path="name" label="姓名">
                        <n-input v-model:value='model.name' placeholder="请输入姓名"/>
                    </n-form-item>
                    <n-form-item path="email" label="邮箱">
                        <n-input
                                v-model:value="model.email"
                                type="text"
                                placeholder="请输入邮箱"

                        />
                    </n-form-item>
                    <n-form-item
                            path="password"
                            label="密码"
                    >
                        <n-input
                                v-model:value="model.password"
                                type="password"
                                placeholder="请输入密码"
                        />
                    </n-form-item>
                    <n-row :gutter="[0, 24]">
                        <n-col :span="24">
                            <div style="display: flex; justify-content: flex-end">
                                <n-button
                                        round
                                        type="primary"
                                        @click="userSubmit"
                                >
                                    提交
                                </n-button>
                            </div>
                        </n-col>
                    </n-row>
                </n-form>
<!--                <template #footer>-->
<!--                    尾部-->
<!--                </template>-->
            </n-card>
        </n-modal>
    </div>
</template>

<style scoped>

</style>